<template>
  <view style="padding: 0.5rem">
    <view class="head-box">
      <view class="head-item" v-for="(item, index) in fundInfo" :key="index">
        <view class="head-num">{{ item.num }}</view>
        <view>{{ item.text }}</view>
      </view>
    </view>
    <view class="tabs-box">
      <u-tabs
        :current="currentTabs"
        :list="tabsList"
        :activeStyle="{ color: '#256FFF' }"
        lineWidth="20"
        lineColor="#256FFF"
        @click="onClickTabs"
      ></u-tabs>
    </view>
    <!-- 交易明细 -->
    <view v-if="currentTabs == 0">
      <view style="margin-bottom: 0.5rem" v-for="(item, index) in revenueList" :key="index">
        <view class="detail-box" @click="onChange(index)">
          <view class="detail-left">
            <view style="padding-right: 1.5rem">
              <view class="detail-left-time">{{ item.time }}</view>
              <view class="detail-left-num">交易{{ item.num }}次</view>
            </view>
            <view style="font-size: 0.55rem; font-weight: bold">
              <view style="color: #fa3534">+{{ item.income }}</view>
              <view style="color: #19be6b">-{{ item.expend }}</view>
            </view>
          </view>
          <u-icon :name="item.show ? 'arrow-up' : 'arrow-down'"></u-icon>
        </view>
        <view
          class="content-box"
          v-show="item.show"
          v-for="(item2, index2) in item.list"
          :key="index2"
        >
          <view class="content-left">
            <view
              class="content-state"
              :class="item2.state == 0 ? 'content-state1' : 'content-state2'"
            >
              {{ item2.state == 0 ? '收' : '支' }}
            </view>
            <view>
              <view>{{ item2.time }}</view>
              <view>{{ item2.type == 0 ? '签到奖励' : '抽奖奖励' }}</view>
            </view>
          </view>
          <view style="text-align: right;">
            <view style="color: #fa3534" v-if="item2.state == 0">+{{ item2.price }}</view>
            <view style="color: #19be6b" v-else>-{{ item2.price }}</view>
            <view>{{ item2.text }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 筛选 -->
    <view v-if="currentTabs == 1"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fundInfo: [
        { text: '累计充值', num: '0.00' },
        { text: '累计提现', num: '0.00' },
        { text: '累计投资', num: '0.00' }
      ],
      currentTabs: 0,
      tabsList: [{ name: '交易明细' }, { name: '筛选' }],
      revenueList: [
        {
          time: '2023/12',
          num: 6,
          income: '431.00',
          expend: '0.00',
          show: false,
          list: [
            { state: 0, time: '2023-12-07 20:33:47', type: 0, text: '来自每日签到', price: '1.00' },
            { state: 1, time: '2023-12-07 20:31:47', type: 1, text: '来自每日签到', price: '1.00' },
            { state: 0, time: '2023-12-07 20:30:47', type: 0, text: '来自每日签到', price: '14.00' }
          ]
        },
        { time: '2023/11', num: 5, income: '314.00', expend: '1.00', show: false },
        { time: '2023/10', num: 2, income: '143.00', expend: '2.00', show: false }
      ]
    };
  },
  methods: {
    // 改变状态
    onChange(index) {
      this.revenueList[index].show = !this.revenueList[index].show;
      this.$set(this.revenueList, index, this.revenueList[index]);
    }
  }
};
</script>

<style scoped>
.head-box {
  padding: 0.8rem;
  border-radius: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(to bottom, #1073c3, #6bbbff);
  box-shadow: 0.2rem 0.2rem 0.32rem 0 rgba(16, 115, 195, 0.27);
}
.head-item {
  color: #fff;
  width: 33.3%;
  font-weight: bold;
  text-align: center;
  border-left: 1px solid #fff;
}
.head-item:first-child {
  border: none;
}
.head-num {
  font-size: 0.64rem;
  padding-bottom: 0.2rem;
}
.tabs-box {
  background: #fff;
  border-radius: 0.3rem;
  margin: 1rem 0 0.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-box {
  padding: 0.5rem 0.8rem;
  background: #fff;
  border-radius: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.detail-left {
  display: flex;
  align-items: center;
}
.detail-left-time {
  color: #333;
  font-size: 0.6rem;
  font-weight: bold;
}
.detail-left-num {
  color: #999;
  font-size: 0.45rem;
}
.content-box {
  padding: 0.5rem 0.8rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content-left {
  display: flex;
  align-items: center;
}
.content-state {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-state1 {
  color: #fa3534;
  border: 1px solid #fa3534;
}
.content-state2 {
  color: #19be6b;
  border: 1px solid #19be6b;
}
</style>
